// web/src/app/(employee)/company-side/_components/columns.ts
'use client';
// 参考: https://ui.shadcn.com/docs/components/data-table#project-structure
import {ColumnDef} from "@tanstack/react-table";
import {Company, Course, Employee} from "@prisma/client";
import {Button} from "@/components/ui/button";
import {ArrowUpDown, MoreHorizontal, Pencil} from "lucide-react";
import {formatPrice} from "@/lib/format";
import {Badge} from "@/components/ui/badge";
import {cn} from "@/lib/utils";
import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from "@/components/ui/dropdown-menu";
import Link from "next/link";

export const columns: ColumnDef<Employee>[] = [
    {
        accessorKey: "name",
        header: ({column}) => {
            return <Button
                variant={'ghost'}
                onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
            >
                Name
                <ArrowUpDown className={`ml-2 size-4`}/>
            </Button>
        },
    },
    {
        accessorKey: "salary",
        header: ({column}) => {
            return <Button
                variant={'ghost'}
                onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
            >
                Salary
                <ArrowUpDown className={`ml-2 size-4`}/>
            </Button>
        },
        cell: ({row}) => {
            const salary = parseFloat(row.getValue('salary') || '0')
            const formatted = formatPrice(salary)

            return (
                <div>{formatted}</div>
            )
        }
    },
    {
        accessorKey: "hr.username",
        header: ({column}) => {
            return <Button
                variant={'ghost'}
                // @ts-ignore
                onClick={() => column.toggleSorting(
                    // @ts-ignore
                    column.getIsSorted() === 'asc'
                )}
            >
                HR
                <ArrowUpDown className={`ml-2 size-4`}/>
            </Button>
        },
    },
    {
        accessorKey: "actions",
        cell: ({row}) => {
            const {id} = row.original

            return (
                <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                        <Button variant={'ghost'} className={`h-4 w-8 p-0`}>
                            <span className={`sr-only`}>Open menu</span>
                            <MoreHorizontal className={`size-4`}/>
                        </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align={'end'}>
                        <Link href={`/company-side/edit-employee?employeeId=${id}`}>
                            <DropdownMenuItem>
                                <Pencil className={`size-4 mr-2`}/>
                                Edit
                            </DropdownMenuItem>
                        </Link>
                    </DropdownMenuContent>
                </DropdownMenu>
            )
        }
    }
]